<template>
  <div class="preview-file-dialog">
    <el-dialog v-model="showVisible">
      <div v-if="!Array.isArray(content)" v-html="content"></div>
      <div v-else class="file-list">
        <div class="file-list__item" v-for="item in content" :key="item.fileId">
          <div class="file-list__item__name one-ellipsis">{{ item.fileName }}</div>
          <el-button link type="primary" @click="handelDown(item)">下载</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  modelValue: Boolean,
  content: {
    type: [String, Array],
    default: ""
  }
});
const emit = defineEmits(["update:modelValue"]);

const showVisible = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});

const handelDown = file => {
  if (!file?.fileUrl) {
    return proxy.$modal.msgError("文件不存在");
  }
  window.open(file.fileUrl);
};
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
$text-color-regular: #606266;
.preview-file-dialog {
  :deep(.el-dialog__body) {
    max-height: 50vh;
    overflow: auto;
  }
  .file-list {
    width: 100%;
    margin: 10px auto;

    &__item {
      @include mixin.flex-center(space-between, center);
      margin-bottom: 10px;
      background-color: #f3f6f9;
      border-radius: 4px;
      padding: 10px;
      cursor: pointer;
      font-size: 14px;
    }
  }
}
</style>
